<template>
  <div class="articleDetail">
    <van-nav-bar
      :title="name"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="details-title">
      <div>{{ article.title }}</div>
      <div>
        <div>作者：{{ article.author }}</div>
        <div class="title-date">{{ article.updateAt }}</div>
      </div>
    </div>
    <div style="background-color: white" class="atrcontent"></div>
    <div style="text-align: center; background-color: white" class="footer">
      <img class="footer-img" src="../../assets/icon/none.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getList } from '/@/api/article/article'

export default defineComponent({
  setup() {
    const route = useRoute()
    const { name, id } = route.params

    const article = ref({
      author: '',
      title: '',
      updateAt: '',
      content: '',
    })

    getList(1, 10, {
      id,
    }).then((res) => {
      article.value = res.data.data.records[0]
    })

    interface Entities {
      [key: string]: any
    }

    watch(article, () => {
      const elementCreate = document.createElement('div')
      elementCreate.innerHTML = article.value.content
      document.querySelector('.atrcontent')!.appendChild(elementCreate)
    })

    return {
      name,
      article,
      onClickLeft: function () {
        history.back()
      },
      escapeStringHTML(str: any) {
        //把实体格式字符串转义成HTML格式的字符串
        var arrEntities: Entities = {
          lt: '<',
          gt: '>',
          nbsp: ' ',
          amp: '&',
          quot: '"',
        }
        return str.replace(
          /&(lt|gt|nbsp|amp|quot);/gi,
          function (all: any, t: string) {
            return arrEntities[t]
          }
        )
      },
    }
  },
})
</script>

<style lang="less" scoped>
.articleDetail {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-top: 45px;
  padding-bottom: 50px;

  /deep/ .van-tab {
    font-size: 15px;
  }

  /deep/ .van-tab--active {
    color: #0387cf;
  }

  /deep/ .van-tabs__line {
    display: none;
  }
}

.atrcontent {
  margin: 0px 7px 0 7px;
  font-size: 13px;
  color: #64717b;
  text-align: justify;
  letter-spacing: 0.01rem;
  padding: 10px;
}

.atrcontent p {
  line-height: 0.55rem;
  font-size: 0.3rem;
  color: #64717b;
  margin-bottom: 0.2rem;
  text-align: justify;
  letter-spacing: 0.01rem;
  word-wrap: break-word;
  width: 100%;
}

.footer {
  width: calc(100vw - 30px);
  margin: 0 auto;
  border-top: 1px solid rgb(67, 149, 255);
  padding-top: 30px;
  padding-bottom: 15px;

  .footer-img {
    width: 80px;
  }
}

.details-title {
  padding: 0 15px;
  background-color: white;
  text-align: center;

  > div:first-child {
    font-size: 16px;
    font-weight: bold;
    padding-top: 20px;
  }

  > div:nth-child(2) {
    margin-top: 20px;
    font-size: 12px;
    border-bottom: 1px solid rgb(67, 149, 255);
    padding-bottom: 10px;

    .title-date {
      margin-top: 5px;
    }
  }
}
</style>
